$(function () {
  // 原始数据
  let ksOriginalData = [];
  // 过滤后的数据
  let filterData = [];
  // 用于新增时ID自动累加
  let seqId = 100;
  let currentPage = 1;
  let currentPageSize = 5;
  //总页数
  let maxPage;

  initKsgl();

  /**
   * 初始化方法，初始数据的时候调用
   */
  function initKsgl() {
    //关闭异步
    $.ajaxSettings.async = false;
    $.getJSON("./../../data/depar-data.json", function (deparData) {
      //初始化赋值
      ksOriginalData = deparData;
    });
    filterData = ksOriginalData;
    loadKsgl();
    showPaging();
  }

  /**
   * 获取分页数据
   * @returns 获取分页显示的那几条数据
   */
  function getPageData() {
    let startIndex = (currentPage - 1) * currentPageSize;
    return filterData.slice(startIndex, startIndex + currentPageSize);
  }

  /**
   * 渲染table数据
   * @param dataList 要渲染的哪些数据
   */
  function showData(dataList) {
    $(".depart-table tbody").html("");
    dataList.forEach((item) => {
      $(".depart-table tbody").append(`<tr>
                <th scope="col"><input type="checkbox"></th>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td><img width="80" height="40" src="${item.imgUrl}"></td>
                <td>${item.code}</td>
                <td>${item.create}</td>
                <td>${item.serial}</td>
                <td>${item.enabled}</td>
                <td><a href="#" ksid = "${item.id}" class="ks-delete-edit" data-toggle="modal" data-target="#partmentAdd">编辑</a> 
                    <a href="#" ksid = "${item.id}" class="ks-delete-one" data-toggle="modal" data-target="#ksDeleteConfirm">删除</a></td>
              </tr>`);
    });
    // 绑定删除事件，将要删除的id值，赋值给删除的确认弹窗。是因为，要实现确认才做删除，不确认不会做删除
    $(".ks-delete-one").click(function () {
      let ksId = parseInt($(this).attr("ksid"));
      $(".del-confirm-but").attr("ksid", ksId);
    });

    // 绑定编辑事件，并赋值相应数据
    $(".ks-delete-edit").click(function () {
      $("#partmentAddTitle").html("修改");
      let ksId = parseInt($(this).attr("ksid"));
      let data = ksOriginalData.find((item) => item.id == ksId);
      $("input[name=ksId]").val(ksId);
      $("input[name=ksName]").val(data.name);
      $("input[name=ksCode]").val(data.code);
      $("input[name='ksImgUrl]'").val();
      $("input[name=ksSerial]").val(data.serial);
      $("input:radio[value=" + data.enabled + "]").attr("checked", "true");
      $("#showKsImg").attr("src", data.imgUrl);
    });
  }

  /**
   * 渲染分页栏
   */
  function showPaging() {
    let ksglHtml = $(".pageNumber");
    maxPage = Math.ceil(filterData.length / currentPageSize);
    $(".ke-page-total").html("共 " + maxPage + " 页");
    ksglHtml.html("");
    for (let i = 1; i <= maxPage; i++) {
      ksglHtml.append(
        `<li class="page-item pageNum" index = "${i}"><a class="page-link" id="pageItem" href="#">${i}</a></li>`
      );
    }
    // 绑定页码单击事件
    $(".pageNum").click(function () {
      //将当前页改为选中的页码
      currentPage = parseInt($(this).attr("index"));
      loadKsgl();
    });
    // 渲染一共多少页
  }

  /**
   * 加载数据到页面
   */
  function loadKsgl() {
    // 获取分页显示的那几条数据
    let pageData = getPageData();
    // 将上面获取的分页数据显示出来
    showData(pageData);
  }

  /**
   * 删除方法  根据科室id删除数据
   * @param  ksId 科室id
   */
  function deleteKsData(ksId) {
    ksOriginalData = ksOriginalData.filter((val) => val.id != ksId);
    filterData = ksOriginalData;
    //初始化当前页为默认1
    currentPage = 1;
    showPaging();
    loadKsgl();
  }

  // 绑定新增科室按钮事件
  $("#addKsBut").click(function () {
    $("#partmentAddTitle").html("新增");
    //重置弹窗中的数据
    $("#partmentAdd form").get(0).reset();
    $("#showKsImg").attr("src", "");
  });

  // 绑定新增弹窗的确认事件
  $(".ks-save").click(function () {
    // 获取值
    let ksName = $("input[name=ksName]").val();
    let ksCode = $("input[name=ksCode]").val();
    let ksImgUrl = $("input[name='ksImgUrl]'").val();
    let ksSerial = $("input[name=ksSerial]").val();
    let ksEnabled = $("input:radio:checked").val();
    // console.log(ksName,ksCode,ksImgUrl,ksSerial,ksEnabled)
    let ksObj = {
      id: ++seqId,
      name: ksName,
      code: ksCode,
      imgUrl: ksImgUrl,
      serial: ksSerial,
      enabled: ksEnabled,
    };
    ksOriginalData.push(ksObj);
    $("#partmentAdd").modal("hide");
    filterData = ksOriginalData;
    //初始化当前页为默认1
    currentPage = 1;
    showPaging();
    loadKsgl();
  });

  // 绑定新增弹窗的确认事件
  $(".ks-img").change(function (e) {
    var imgFile = e.target.files[0];
    let fr = new FileReader();
    fr.readAsDataURL(imgFile);
    fr.onload = (e) => {
      $("#showKsImg").attr("src", e.target.result);
    };
  });

  // 绑定搜索事件
  $("#kssearch").click(function () {
    let kssearchName = $("input[name=kssearch1]").val();
    if (kssearchName != "") {
      filterData = ksOriginalData.filter((val) => val.name == kssearchName);
    } else {
      filterData = ksOriginalData;
    }
    //初始化当前页为默认1
    currentPage = 1;
    showPaging();
    loadKsgl();
  });

  // 绑定上一页事件
  $(".ke-page-pre").click(function () {
    if (currentPage > 1) {
      currentPage--;
    }
    loadKsgl();
  });

  // 绑定下一页事件
  $(".ke-page-next").click(function () {
    if (currentPage < maxPage) {
      currentPage++;
    }
    loadKsgl();
  });

  // 绑定每页显示多少条数据的下拉选中事件
  $(".show-page-size").change(function () {
    let showPageSize = $(this).val();
    //更改当前显示的条数
    currentPageSize = parseInt(showPageSize);
    //初始化当前页为默认1
    currentPage = 1;
    showPaging();
    loadKsgl();
  });

  // 绑定删除弹窗的确认事件
  $(".del-confirm-but").click(function () {
    let ksId = parseInt($(this).attr("ksid"));
    deleteKsData(ksId);
    $("#ksDeleteConfirm").modal("hide");
  });
});
